<#assign ctx=request.contextPath />
<#import '${ctx}/sys/include/table/select.html' as select />
<#import '${ctx}/biz/chart/element/chart_detail2.html' as cd/>
<#import '${ctx}/biz/chart/element/metric-select2.html' as metric />
<@cd.detail>
<div class="layui-row">
    <form class="layui-form">
    	<input id="chart_type" value="bar" type="hidden">
        <div class="layui-form-item">
            <label class="layui-form-label">选择数据源</label>
            <div class="layui-input-block"><@select.table name="dsId"
                show="dsName" url="${ctx}/biz/c/p/ds-select-table" />
            </div>
        </div>
        <label>指标设置</label>
        <hr/>
        <@metric.atom aggs="true" url="${ctx}/biz/chart/data"/>
    </form>
</div>
</@cd.detail>
<script type="text/javascript">
	layui.use(['layer','appJs'],function(){
		var $ = layui.$
		,layer = layui.layer
		,app = layui.appJs;

		window.handleResponse = function(chart,data) {
			let position = "";
			let color = "";
			let json = data.requestJson;
			let jsonObj = JSON.parse(json);
			let m = jsonObj.metric;
			while(m[0] && m[0].metric){
				m = m[0].metric;
			}
			let met = "__doc";
			let tag = 0;
			if(m[0]) {
				console.log(m[0].type)
				if(m[0].type == 'avg' || m[0].type == 'sum') {
					tag = 1;
					met = m[0].type
				}
			}
			
			let fieldList = data.fieldList;
			if(fieldList.length-tag == 1) {
				position = fieldList[0].id+"";
			}
			if(fieldList.length-tag == 2) {
				color = fieldList[1].id+"";
				position = fieldList[0].id+"";
			}
			chart.data(data.listData);
			if(jsonObj.dimension.type) {
				let t = jsonObj.dimension.type;
				if(t == 'date') {
					let opt = {};
					opt[fieldList[0].id+""] = {nice:true,type: 'time',mask:'YYYY-MM-dd HH:mm'};
					chart.scale(opt);
				}
			}
			chart.tooltip({
				  showMarkers: false,
				  shared: true,
				});
			chart.interaction('active-region');
			let geom = chart.interval().position(position+"*"+met);
			if(color != "") {
				geom.color(color);
				geom.adjust([
				    {
				        type: 'dodge',
				        marginRatio: 0,
				      },
				    ]);
				if(jsonObj.dimension.type) {
					let t = jsonObj.dimension.type;
					if(t == 'date') {
						geom.adjust([
						    {
						        type: 'stack',
						        marginRatio: 0,
						      },
						    ]);
					}
				}
				
			}else{
				geom.color('blue');
			}
			
		}

	});
</script>